import { Card,Form,Input,Button, message } from "antd"
import './index.scss'
import { fetLogin} from '@/store/module/use.js'
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
function Login(){
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const onFinish = async (values) => {
        console.log('Success:', values);
        await dispatch(fetLogin(values))
        navigate('/')
        message.success('登陆成功')
      };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };
    return <div className="contonter">
            <Card style={{ width: 500 }} > 
            
    <div className="head">极客园</div>
    <div>
        <Form validateTrigger="onBlur"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        >
        <Form.Item
       name="mobile"
       rules={[
         {
           required: true,
           message: '请输入手机号!',
         },
         {
            pattern: /^1[3-9]\d{9}$/,
            message: '请确认手机号格式!'
         }
       ]}
      >
         <Input   placeholder="请输入手机号"/>
        </Form.Item>
        <Form.Item
        name="code"
        rules={[
          {
            required: true,
            message: '请输入密码!',
          },
        ]}>
         <Input placeholder="请输入密码" />
        </Form.Item>
        <Form.Item>
       <Button type="primary" style={{ width:'100%' }} htmlType="submit">登录</Button>
       </Form.Item>
        </Form>
    </div>
    
    </Card>
    </div>
}
export default Login